<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--<html lang="zh-CN">-->
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.25" charset="UTF-8">
    <link rel="StyleSheet" href="../css/jpetstore.css" type="text/css" media="screen"/>

    <meta charset="UTF-8">
    <title>日志记录系统</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 600px;
            margin: 2rem auto;
            padding: 0 1rem;
        }

        .log-form {
            background: #90a1d98c;
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        label {
            display: block;
            margin-bottom: 0.5rem;
            color: #333;
            font-weight: 600;
        }

        input[type="text"],
        textarea {
            width: 100%;
            padding: 0.8rem;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }

        button {
            background: #007bff;
            color: white;
            padding: 0.8rem 1.5rem;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background 0.3s ease;
        }

        button:hover {
            background: #0056b3;
        }

        #message {
            margin-top: 1rem;
            padding: 1rem;
            border-radius: 4px;
            display: none;
        }

        .success {
            background: #d4edda;
            color: #155724;
        }

        .error {
            background: #f8d7da;
            color: #721c24;
        }
    </style>
</head>

<body>
<div class="log-form">
    <h1>提交日志信息</h1>
    <form id="logForm" th:action="@{/Log/log}" method="post" onsubmit="return false">
        <div class="form-group">
            <label >用户名：</label>
            <label th:text="${username}"></label>
        </div>

        <div class="form-group">
            <label for="logInfo">日志内容：</label>
            <textarea
                    id="logInfo"
                    name="logInfo"
                    rows="4"
                    placeholder="请输入日志内容"
                    required
            ></textarea>
        </div>

        <div>
            <time id="current-time"></time>
        </div>
        <button type="submit">提交日志</button>
    </form>
    <div id="message"></div>
</div>




<script>
    // 获取时间元素
    const timeElement = document.getElementById('current-time');

    // 更新时间的函数
    function updateTime() {
        const now = new Date(); // 获取当前时间

        // 人类可读的格式（示例：2023年10月5日 下午3:30:45）
        const humanTime = now.toLocaleString('zh-CN', {
            year: 'numeric',
            month: 'long',
            day: 'numeric',
            hour: 'numeric',
            minute: '2-digit',
            second: '2-digit',
            hour12: true
        });

        // 机器可读的 ISO 格式（示例：2023-10-05T15:30:45+08:00）
        const isoTime = now.toISOString();

        // 更新 <time> 标签的内容和属性
        timeElement.textContent = humanTime;
        timeElement.setAttribute('datetime', isoTime);
    }

    // 页面加载后立即更新时间
    updateTime();

    // 每秒更新一次时间
    setInterval(updateTime, 1000);
</script>

<script>
    document.getElementById('logForm').addEventListener('submit', async (e) => {
        e.preventDefault();

        const formData = {
            logInfo: document.getElementById('logInfo').value
        };

        try {
            // 路径改为大写 /Log/log
            const response = await fetch('/Log/log', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: new URLSearchParams(formData)
            });

            const result = await response.json(); // 解析 JSON 响应

            const messageEl = document.getElementById('message');
            messageEl.style.display = 'block';
            if (result.status === 'success') {
                messageEl.className = 'success';
                messageEl.textContent = '✅ ' + result.message;
                document.getElementById('logInfo').value = ''; // 清空内容
            } else {
                messageEl.className = 'error';
                messageEl.textContent = '❌ ' + result.message;
            }

            setTimeout(() => {
                messageEl.style.display = 'none';
            }, 3000);

        } catch (error) {
            console.error('提交失败:', error);
            const messageEl = document.getElementById('message');
            messageEl.style.display = 'block';
            messageEl.className = 'error';
            messageEl.textContent = '❌ 网络错误，请检查连接';
        }
    });
</script>

</body>
</html>